<template>
  <div>
    <h1>App...</h1>
    <p>App {{ num }}</p>
    <!-- 绑定自定义事件 -->
    <A @setNum="setNum" />
    <!-- 
      给DOM元素绑定的事件都是DOM事件
      给组件绑定的事件默认都是自定义事件，自定义事件必须触发才会生效
    -->
    <B @click="num++" />

    <!-- 
       给组件绑定的事件默认都是自定义事件，自定义事件必须触发才会生效
       加上.native，绑定的事件就是原生DOM事件
       给组件最外层元素绑定这个事件
     -->
    <C @click.native="num++" />

    <!-- <button @click="handleClick('a', 'b', $event)"></button> -->
    <!-- 
      $event: 
        简单理解：event对象（实际不一定是）
        真正理解：代表事件回调函数的第一个参数
        
        在原生DOM事件中，第一个参数就是event对象，所以$event就是event
        在自定义事件中，第一个参数指的是触发自定义事件传入的第一个参数，所以$event就是触发自定义事件传入的第一个参数
    -->
    <D @say="say('AAAA', $event)" />
  </div>
</template>

<script>
/*
  自定义事件
    1. 语法
      - 绑定事件
        <A @xxx="xxx" />
        
        <A ref="a" />
        mounted() {
          this.$refs.a.$on('xxx', xxx);
        }

      - 触发事件
        this.$emit(事件名称[, 参数1, 参数2, ...])

    2. API
      $on()
      $once()
      $off()
      $emit()
*/
import A from "./AComp.vue";
import B from "./BComp.vue";
import C from "./CComp.vue";
import D from "./DComp.vue";

export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    // 数据源在哪，更新数据的方法就在哪
    setNum(num) {
      this.num += num;
    },
    say(a, b) {
      console.log(a, b);
    },
  },
  components: {
    A,
    B,
    C,
    D,
  },
};
</script>

<style></style>
